<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form lay-filter="contactInfoForm" class="layui-form model-form">
                <input name="id" type="hidden"/>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属客户</label>
                        <div class="layui-input-block">
<!--                            <input name="customerName" id="customerName" type="text" class="layui-input"-->
<!--                                   lay-verify="required"-->
<!--                                   required/>-->
                            <select name="selCustomerId" id="selCustomerId" lay-filter="selCustomerId" lay-verify="required" required
                                    lay-search></select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red">*</span>联系人姓名</label>
                        <div class="layui-input-block">
                            <input name="name" placeholder="请输入联系人姓名" type="text" class="layui-input"
                                   lay-verify="required"
                                   required/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red">*</span>账号</label>
                        <div class="layui-input-block">
                            <input id="account" name="account" placeholder="请输入账号" type="text" class="layui-input" lay-verify="account"
                                   required/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red">*</span>密码</label>
                        <div class="layui-input-block">
                            <input id="password" name="password" placeholder="请输入密码" type="password" class="layui-input" lay-verify="password"
                                   required/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <select name="sex">
                                <option value="">请选择性别</option>
                                <option value="man">男</option>
                                <option value="woman">女</option>
                                <option value="other">未知</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red">*</span>职务</label>
                        <div class="layui-input-block">
                            <select name="postId" id="contactPostId" lay-filter="postId" lay-verify="required"
                                    lay-search></select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属部门</label>
                        <div class="layui-input-block">
                            <input name="department" placeholder="请输入所属部门" type="text" class="layui-input"
                                   lay-verify="required"
                                   required/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red">*</span>电话</label>
                        <div class="layui-input-block">
                            <input name="telephone" placeholder="请输入电话" type="text" class="layui-input"
                                   lay-verify="required"
                                   required/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">微信号</label>
                        <div class="layui-input-block">
                            <input name="wechatNumber" placeholder="请输入微信号" type="text" class="layui-input"/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input name="email" placeholder="请输入邮箱" type="text" class="layui-input"/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">通讯地址</label>
                        <div class="layui-input-block">
                            <input name="mailAddress" placeholder="请输入通讯地址" type="text" class="layui-input"/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input name="sort" placeholder="" type="text" class="layui-input"/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red"></span>联系人照片</label>
                        <div id="btnUpload14" class="layui-btn" style="float: left;"><i class="layui-icon">&#xe681;</i>上传文件
                        </div>
                        <div id="btnUpload14_path" style="margin-left: 260px;line-height: 40px;"></div>
                        <input id="btnUpload14_file" name="picture" type="hidden" lay-verify="contactShot"
                               lay-verType="alert"/>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">名片</label>
                        <div class="layui-input-block">
                            <div id="btnUpload16" class="layui-btn" style="float: left;"><i class="layui-icon">&#xe681;</i>上传文件
                            </div>
                            <div id="btnUpload16_path" style="margin-left: 150px;line-height: 40px;"></div>
                            <input id="btnUpload16_file" name="visitingCard" type="hidden"/>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                        <textarea name="remark" placeholder="请输入备注" maxlength="200"
                                  class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item text-right">
                    <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
                    <button class="layui-btn" lay-filter="contactInfoFormSubmit" lay-submit>保存</button>
                </div>
            </form>
        </div>
    </div>
</div>
<style>
    #systemOfficialInfoForm .layui-form-label {
        width: 100px;
        padding-left: 0;
    }

    #systemOfficialInfoForm .layui-input-block {
        margin-left: 120px;
    }

    .imgBox {
        margin-left: 30px;
        float: left;
        width: 300px;
        height: 40px;
        overflow: hidden;
    }

    .imgBox > img {
        max-width: 300px;
        max-height: 40px;
    }
    .textInputBox{
        width: 500px !important;
    }
    .delBtn{
        margin: 9px;
        float: left;
    }
</style>
<!-- js部分-->
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        var config = layui.config;
        var contactId=config.getUser().id;
        $("body").delegate(".checkImg", "click", function () {
            admin.previewImg(this)
        })
        list();

        //初始化表单
        function list() {


            //获取职务
            admin.req('enterprise/sell/admin/customerContactPost/list', {limit: 999}, (res) => {

                if (res.code == 200) {
                    loadSelectHtml(res.data, "请选择职务", 'postId', 'name')
                    if (config.getUser().postId) {
                        $("#contactPostId").val(config.getUser().postId);
                        form.render('select');
                    }
                }
            }, 'get');
            //获取所属单位
            admin.req('enterprise/sell/admin/customersInfo/getBasicInfo', {limit: 999}, (res) => {

                if (res.code == 200) {
                    loadSelectHtml(res.data, "请选择单位", 'selCustomerId', 'customerName')
                    if (config.getUser().selCustomerId) {
                        $("#selCustomerId").val(config.getUser().selCustomerId);
                        form.render('select');
                    }
                }
            }, 'get');

            // 获取客户数据
            admin.req('enterprise/sell/admin/contactInfo/list', {id:config.getUser().id}, function (res) {

                if (res.code == 200) {
                    // console.log(res.data[0].customerName);
                    // $("#customerName").val(res.data[0].name);
                    // form.render('select');
                    form.val('contactInfoForm', res.data[0]);
                } else {
                    layer.msg('获取客户失败', {icon: 2, time: 1000});
                }


                if (res.data[0] && res.data[0].picture) {
                    $('#btnUpload14_path').html('<img src="' + res.data[0].picture + '" style="height: 35px;" />');
                }

                if (res.data[0] && res.data[0].visitingCard) {
                    $('#btnUpload16_path').html('<img src="' + res.data[0].visitingCard + '" style="height: 35px;" />');
                }
            }, 'GET');



            //上传联系人照片
            upload.render({
                elem: '#btnUpload14'
                , url: config.upload_url + 'upload?path=' + img_path
                , data: {}
                , accept: 'file'
                , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
                , headers: {authorization: 'Bearer ' + config.getToken()}
                , done: function (res) {
                    if (res.code == 200) {

                        layer.msg(res.msg || "上传成功", {icon: 1});
                        var imagUrl = res.data.url;
                        $('#btnUpload14_path').html('<img src="' + imagUrl + '" style="height: 35px;" />');
                        $('#btnUpload14_file').val(imagUrl);
                    } else if (res.code == 502) {
                        return location.replace('admin/login.html');
                    } else {
                        layer.msg(res.msg || "上传失败", {icon: 2});
                    }
                }
            });

            // if (res.data && res.data.picture) {
            //     $('#btnUpload14_path').html('<img src="' + res.data.picture + '" style="height: 35px;" />');
            // }

            //上传名片
            upload.render({
                elem: '#btnUpload16'
                , url: config.upload_url + 'upload?path=' + img_path
                , data: {}
                , accept: 'file'
                , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
                , headers: {authorization: 'Bearer ' + config.getToken()}
                , done: function (res) {
                    if (res.code == 200) {

                        layer.msg(res.msg || "上传成功", {icon: 1});
                        var imagUrl = res.data.url;
                        $('#btnUpload16_path').html('<img src="' + imagUrl + '" style="height: 35px;" />');
                        $('#btnUpload16_file').val(imagUrl);
                    } else if (res.code == 502) {
                        return location.replace('admin/login.html');
                    } else {
                        layer.msg(res.msg || "上传失败", {icon: 2});
                    }
                }
            });
            // if (res.data && res.data.visitingCard) {
            //     $('#btnUpload16_path').html('<img src="' + data.visitingCard + '" style="height: 35px;" />');
            // }

            // 表单提交事件
            form.on('submit(contactInfoFormSubmit)', function (d) {
                layer.load(2);
                admin.req('enterprise/sell/admin/contactInfo/update' , d.field, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        table.reload('contactInfoTable');
                        layer.closeAll('page');
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'PUT' );
                return false;
            });
        }

        //查询企业信息
        var enterpriseInfo;
        admin.req('enterprise/system/admin/enterpricceId/getEnterpricceIdVO', {}, function (res) {
            enterpriseInfo = res.data;
        }, 'get', false);
        if ("" == enterpriseInfo || null == enterpriseInfo) {
            layer.msg("企业信息获取异常", {icon: 1});
            return;
        }
        //var productCode = $("input[name='productCode']").val();
        upload.render({
            elem: '#btnUpload1'
            , url: config.upload_url + 'uploadFile'
            , data: {"path": enterpriseInfo.enterpriseCode + "/"}
            , accept: 'file'
            , exts: 'jpg|png|ico'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    //layer.msg(res.msg, {icon: 1});
                    var imagUrl = res.data.url;
                    $('#btnUpload1_path').html('<img src="' + imagUrl + '" style="height: 32px;width: 32px;" />');
                    $('#icon').val(imagUrl);
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });

        upload.render({
            elem: '#btnUpload2'
            , url: config.upload_url + 'uploadFile'
            , data: {"path": enterpriseInfo.enterpriseCode + "/"}
            , accept: 'file'
            , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    //layer.msg(res.msg, {icon: 1});
                    var imagUrl = res.data.url;
                    $('#btnUpload2_path').html('<img src="' + imagUrl + '" style="height: 50px;" />');
                    $('#foregroundLogo').val(imagUrl);
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });


        upload.render({
            elem: '#btnUpload3'
            , url: config.upload_url + 'uploadFile'
            , data: {"path": enterpriseInfo.enterpriseCode + "/"}
            , accept: 'file'
            , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    //layer.msg(res.msg, {icon: 1});
                    var imagUrl = res.data.url;
                    $('#btnUpload3_path').html('<img src="' + imagUrl + '" style="height: 50px;" />');
                    $('#foregroundInverseLogo').val(imagUrl);
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });


        upload.render({
            elem: '#btnUpload4'
            , url: config.upload_url + 'uploadFile'
            , data: {"path": enterpriseInfo.enterpriseCode + "/"}
            , accept: 'file'
            , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    // layer.msg(res.msg, {icon: 1});
                    var imagUrl = res.data.url;
                    $('#btnUpload4_path').html('<img src="' + imagUrl + '" style="height: 50px;" />');
                    $('#backgroundLogo').val(imagUrl);
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });


        upload.render({
            elem: '#btnUpload5'
            , url: config.upload_url + 'uploadFile'
            , data: {"path": enterpriseInfo.enterpriseCode + "/"}
            , accept: 'file'
            , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    //layer.msg(res.msg, {icon: 1});
                    var imagUrl = res.data.url;
                    $('#btnUpload5_path').html('<img src="' + imagUrl + '" style="height: 50px;" />');
                    $('#publicNumber').val(imagUrl);
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });


        upload.render({
            elem: '#btnUpload6'
            , url: config.upload_url + 'uploadFile'
            , data: {"path": enterpriseInfo.enterpriseCode + "/"}
            , accept: 'file'
            , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    //layer.msg(res.msg, {icon: 1});
                    var imagUrl = res.data.url;
                    $('#btnUpload6_path').html('<img src="' + imagUrl + '" style="height: 50px;" />');
                    $('#vendorApplets').val(imagUrl);
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });
        // 显示编辑弹窗enterprise/system/admin/systemOfficialInfo/update
        form.on('submit(systemOfficialInfoFormSubmit)', function (d) {
            console.log(d.field)
            if ($("#id").val() != "") {
                admin.req('enterprise/system/admin/systemOfficialInfo/update', d.field, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                    list();
                }, 'PUT');
            } else {
                admin.req('enterprise/system/admin/systemOfficialInfo/add', d.field, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                    list();
                }, 'POST');
            }
            return false;
        });

        $('.delBtn').click(function () {
            $('#'+$(this).attr('bandname')).val('');
            $('#'+$(this).attr('bandname')).prev().html('')
        })

        /**
         * 加载地址HTML
         * @param data 下拉菜单数据
         * @param tips select 默认提示
         * @param htmltarget html要插入的位置
         * @param name  下拉框需要显示值的属性
         */
        function loadSelectHtml(data, tips, htmltarget, name) {
            let html = ' <option value>' + tips + '</option>';
            if (!data || data == null) {
                return;
            }
            for (let i = 0; i < data.length; i++) {
                html += `<option value='${data[i].id}'>${data[i][name]}</option>`;
            }
            $("[name='" + htmltarget + "']").html(html);
            form.render('select');
        }

        // 上传图片
        function uploadImg(_elem, pathId, inputId) {
            upload.render({
                elem: '#' + _elem
                , url: config.upload_url + 'uploadFile'
                , data: {}
                , accept: 'file'
                , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
                , headers: {Authorization: 'Bearer ' + config.getToken()}
                , done: function (res) {
                    if (res.code == 200) {
                        layer.msg(res.msg || "上传成功", {icon: 1});
                        let imagUrl = res.data.url;
                        $('#' + pathId).html('<img src="' + imagUrl + '" style="height: 35px;"/>');
                        $('#' + inputId).val(imagUrl);
                    } else if (res.code == 502) {
                        return location.replace('admin/login.html');
                    } else {
                        layer.msg(res.msg || "上传失败", {icon: 2});
                    }
                }
            });
        }
    });
</script>